import React, {
  useEffect,
  forwardRef,
  useImperativeHandle,
  useState,
  useRef,
} from 'react';
import * as echarts from 'echarts';
import ReactEcharts from 'echarts-for-react';
import styles from './echart.less';

let name = [1, 2, 3, 4, 5, 6, 7];
const LineEcharts = forwardRef((props, ref) => {
  // const { onSelectChart } = props;
  // echarts配置项
  console.log(props);
  let option = {
    xAxis: {
      type: 'category',
      // data: [1, 2, 3, 4, 5, 6, 7],
    },
    yAxis: {
      type: 'value',
    },
    tooltip: {
      trigger: 'axis',
    },
    toolbox: {
      feature: {
        dataZoom: {
          yAxisIndex: false,
        },
        brush: {
          type: ['lineX', 'clear'],
        },
      },
    },
    brush: {
      xAxisIndex: 'all',
      brushLink: 'all',
      brushMode: 'single',
      outOfBrush: {
        colorAlpha: 0.1,
      },
    },
    dataZoom: [
      {
        xAxisIndex: [0, 2],
      },
      {
        yAxisIndex: [0, 2],
        right: 1500,
      },
      // {
      //   type: 'inside',
      //   start: 0,
      //   end: 100,
      // },
      // {
      //   show: true,
      //   type: 'slider',
      //   top: '85%',
      //   start: 0,
      //   end: 100,
      // },
    ],
    series: [
      {
        data: [
          150, 230, 224, 218, 135, 147, 260, 300, 400, 500, 111, 3, 43, 66, 321,
          123,
        ],
        type: 'line',
      },
    ],
  };
  const { onSelectChart } = props;
  const [selectValue, setSelectValue] = useState([]);
  const [optionData, setOptionData] = useState(option);
  const [highLight, setHighLight] = useState([]);

  let chartRef = useRef(null);
  let chartRef2 = useRef(null);
  let chartRef3 = useRef(null);

  const onClick = (type) => {
    const echartsInstance = chartRef.current.getEchartsInstance();
    const echartsInstance2 = chartRef2.current.getEchartsInstance();
    const echartsInstance3 = chartRef3.current.getEchartsInstance();
    option.series = [
      {
        data: [
          150, 230, 224, 218, 135, 147, 260, 300, 400, 500, 111, 3, 43, 66, 321,
          123, 1000, 700,
        ],
        type: 'line',
      },
    ];
    echartsInstance.setOption(option);
    if (_.isEmpty(selectValue)) {
      console.log(option.series[0].data.length);

      echartsInstance.dispatchAction({
        type: 'brush',
        areas: [
          {
            brushType: 'lineX',
            coordRange: [
              option.series[0].data.length - 2,
              option.series[0].data.length - 1,
            ],
            xAxisIndex: 0,
          },
        ],
      });
      // echartsInstance2.dispatchAction({
      //   type: 'brush',
      //   areas: [
      //     {
      //       brushType: 'lineX',
      //       coordRange: ['Sat', 'Sun'],
      //       xAxisIndex: 0,
      //     },
      //   ],
      // });
      // echartsInstance3.dispatchAction({
      //   type: 'brush',
      //   areas: [
      //     {
      //       brushType: 'lineX',
      //       coordRange: ['Sat', 'Sun'],
      //       xAxisIndex: 0,
      //     },
      //   ],
      // });
    } else {
      const series = [
        // {
        //   data: [150, 230, 224, 218, 135, 147, 260],
        //   type: 'line',
        //   markArea: {
        //     itemStyle: {
        //       color: 'rgba(0, 0, 0, 0)',
        //     },
        //     data: [
        //       [
        //         {
        //           name: '',
        //           xAxis: selectValue ? name[selectValue[0]] : 0,
        //         },
        //         {
        //           xAxis: selectValue ? name[selectValue[1]] : 0,
        //         },
        //       ],
        //     ],
        //   },
        // },
      ];
      // const newOption = { ...optionData, series };
      // setOptionData(newOption);
      // // drawCharts(newOption);
      // onSelectChart(
      //   [{ beginTime: name[selectValue[0]], endTime: name[selectValue[1]] }],
      //   type,
      // );
      // echartsInstance.dispatchAction({
      //   type: 'brush',
      //   areas: [],
      // });
    }
  };

  useImperativeHandle(ref, () => ({ onClick }));

  useEffect(() => {
    const echartsInstance = chartRef.current.getEchartsInstance();
    const echartsInstance2 = chartRef2.current.getEchartsInstance();
    const echartsInstance3 = chartRef3.current.getEchartsInstance();
    echartsInstance.on('brushSelected', onBrushSelected);
    console.log(echartsInstance, 'echartsInstance');
    echarts.connect([echartsInstance, echartsInstance2, echartsInstance3]);
    // echartsInstance.dispatchAction({
    //   type: 'brush',
    //   areas: [
    //     {
    //       brushType: 'lineX',
    //       coordRange: ['Sat', 'Sun'],
    //       xAxisIndex: 0,
    //     },
    //   ],
    // });
    // 接受父组件传值，动态添加echarts series中的数据
  }, []);
  const onBrushSelected = (params) => {
    const range = _.get(params, ['batch', '0', 'areas', '0', 'coordRange']);
    console.log(range, 'range');
    setSelectValue(range);
  };
  const onEvents = {
    brushSelected: (params) => {
      console.log(params, 'brushSelected');
      const range = _.get(params, ['batch', '0', 'areas', '0', 'coordRange']);
      console.log(range, 'range');
      setSelectValue(range);
    },
  };

  return (
    <div>
      <div
        className={styles.base_disposal}
        key="帧数"
        style={{ marginTop: '24px' }}
      >
        <div className={styles.disposal_header}>
          <div className={styles.disposal_bar}></div>
          <div className={styles.disposal_title}>CPU帧率</div>
          <img className={styles.disposal_picture} src="" />
        </div>
        <div className={styles.disposal_dates} style={{ width: '100%' }}>
          <ReactEcharts
            key="1"
            width="100%"
            style={{ width: '100%' }}
            option={optionData}
            notMerge={true}
            group="group"
            lazyUpdate={true}
            ref={chartRef}
            // onEvents={onEvents}
          />
        </div>
      </div>
      <div
        className={styles.base_disposal}
        key="卡顿分布"
        style={{ marginTop: '24px' }}
      >
        <div className={styles.disposal_header}>
          <div className={styles.disposal_bar}></div>
          <div className={styles.disposal_title}>GPU频率/负载</div>
          <img className={styles.disposal_picture} src="" />
        </div>
        <div className={styles.disposal_dates} style={{ width: '100%' }}>
          <ReactEcharts
            key="2"
            width="100%"
            style={{ width: '100%' }}
            option={optionData}
            notMerge={true}
            group="group"
            lazyUpdate={true}
            ref={chartRef2}
          />
        </div>
      </div>

      <div
        className={styles.base_disposal}
        key="负载"
        style={{ marginTop: '24px' }}
      >
        <div className={styles.disposal_header}>
          <div className={styles.disposal_bar}></div>
          <div className={styles.disposal_title}>DDR频率</div>
          <img className={styles.disposal_picture} src="" />
        </div>
        <div className={styles.disposal_dates} style={{ width: '100%' }}>
          <ReactEcharts
            key="3"
            width="100%"
            style={{ width: '100%' }}
            option={optionData}
            notMerge={true}
            group="group"
            lazyUpdate={true}
            ref={chartRef3}
          />
        </div>
      </div>
    </div>
  );
});
// 暴露该组件
export default LineEcharts;
